<template>
	<view class="conter">
		<view class="statistical_box">
			<view class="number">统计详情</view>
			<!-- 市值 -->
			<view style="margin-bottom: 15rpx;">
				<view class="market_value">
					<view class="image_box">
						<u--image width="80rpx" height="80rpx" src="../../static/images/shizi.png"></u--image>
					</view>
					<view class="value_box" style="margin-top: 10rpx;">
						<view>
							Duck市值
						</view>
						<view style="margin-top: 5rpx;">
							{{ thousandSign2(times_num) }}
						</view>
					</view>
				</view>
				<view class="charts_box">
					<qiun-data-charts type="column" :opts="opts_times" :chartData="chartData_times" />
				</view>
			</view>
			<!-- 市值 -->
			<!-- duck数量 -->
			<view style="margin-bottom: 15rpx;">
				<view class="market_value">
					<view class="image_box">
						<u--image width="80rpx" height="80rpx" src="../../static/images/suklaing.png"></u--image>
					</view>
					<view class="value_box" style="margin-top: 10rpx;">
						<view>
							Duck数量
						</view>
						<view style="margin-top: 5rpx;">
							{{ thousandSign2(mon_num) }}
						</view>
					</view>
				</view>
				<view class="charts_box">
					<qiun-data-charts type="column" :opts="opts_mon" :chartData="chartData_mon" />
					<!-- <qiun-data-charts type="area" :opts="opts_mon" :chartData="chartData_mon" /> -->
				</view>
			</view>
			<!-- duck数量 -->
			<!-- 总用户数量 -->
			<view style="margin-bottom: 15rpx;">
				<view class="market_value">
					<view class="image_box">
						<u--image width="80rpx" height="80rpx" src="../../static/images/yonghu.png"></u--image>
					</view>
					<view class="value_box" style="margin-top: 10rpx;">
						<view>
							用户总数量
						</view>
						<view style="margin-top: 5rpx;">
							{{ thousandSign2(user_num) }}
						</view>
					</view>
				</view>
				<view class="charts_box">
					<qiun-data-charts type="column" :opts="opts_user" :chartData="chartData_user" />
				</view>
			</view>
			<!-- 总用户数量 -->
			<!-- 金币数量 -->
			<view style="margin-bottom: 15rpx;">
				<view class="market_value">
					<view class="image_box">
						<u--image style="margin-left: 5rpx;" width="70rpx" height="70rpx"
							src="../../static/images/crazy/jinbi.png"></u--image>
					</view>
					<view class="value_box">
						<view>
							金豆数量
						</view>
						<view style="margin-top: 5rpx;">
							{{ getSendTimrrrCount.count }}
						</view>
					</view>
				</view>
				<view class="charts_box">
					<qiun-data-charts  type="mix" :opts="opts_stat" :chartData="chartData_stat" />
				</view>
			</view>
			<!-- 金币数量 -->
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	import {
		getMonLine,
		getTimesLine,
		getSendTimesCount,
		getTimesStat,
		getMonStat
	} from '../../api/work/market.js';
	export default {
		data() {
			return {
				imgUrl: config.imgUrl,
				allCount: 0,
				monList: [],
				specialList: [],
				getSpecialsList: [],
				imgUrl: config.gillUrl,
				chartData_times: {},
				times_line: [],
				times_num: 0,
				chartData_mon: {},
				mon_line: [],
				user_line: [],
				chartData_user: {},
				getSendTimrrrCount: {},
				user_num: 0,
				mon_num: 0,
				// duck数量
				opts_mon: {
					dataLabel: false,
					color: ["#D65FE1", "#D65FE1"],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							barBorderCircle: true,
							linearType: "custom"
						}
					}
				},
				opts_user: {
					color: ["#DFBF3C", "#DFBF3C"],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							barBorderCircle: true,
							linearType: "custom",

						}
					}
				},
				// 市值
				opts_times: {
					color: ["#5552FF", "#5552FF"],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							barBorderCircle: true,
							linearType: "custom"
						}
					}
				},
				chartData_stat: {},
				// 金豆
				opts_stat: {
					color: ['#63cd92' ],
					enableScroll: false,
					dataLabel: false,
					legend: {
					},
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
						data: [{
								position: 'left',
								min: 0
							},
							{
								position: 'left',
								min: 0
							}
						]
					},
					extra: {
						mix: {
							column: {
								type: "group",
								width: 30,
								activeBgColor: "#000000",
								activeBgOpacity: 0.08,
								barBorderCircle: true,
								linearType: "custom"
							},
							line: {}
						}
					}
				}
			};
		},
		async mounted() {
			await this.setMon();
			await this.setUser();
			await this.setTimes();
			await this.setTimesStat();
		},
		created() {
			
		},
		methods: {
			gospecial() {
				this.onShow = true;
			},
			thousandSign2(num) {
				return (num + '').replace(/\d(?=(\d{3})+$)/g, '$&,');
			},
			//沙沙数量
			async getSendTiCount() {
				const res = await getSendTimesCount();
				this.getSendTimrrrCount = res.data;
			},
			async setMon() {
				const res = await getMonLine(30);
				this.mon_line = res.data[0].slice(-6); // 获取前五条数据
				this.user_line = res.data[1].slice(-6); // 获取前五条数据
				this.user_num = this.user_line[this.user_line.length - 1]; // 获取最后一条用户数据
				this.mon_num = this.mon_line[this.mon_line.length - 1]; // 获取最后一条 mon 数据
				let data_mon = {
					categories: this.mon_line.map((_, index) => index + 1), // 这里可以创建一个从 1 到 n 的索引数组
					series: [{
						name: '',
						data: this.mon_line,
						pointShape: 'none',
						legendShape: 'none',
					}]
				};
				this.chartData_mon = JSON.parse(JSON.stringify(data_mon));
			},
			async setTimesStat() {
				//获取时之沙的价格统计数据 带成交量
				const res = await getTimesStat();
				console.log(res);
				let dealNum = res.data.dealNum;
				if(dealNum.length > 6) {
				    dealNum = dealNum.slice(-6);
				}
				let price = res.data.price;
				if(price.length > 6) {
				    price = price.slice(-6);
				}
				const indexArray = dealNum.map((i, index) => index);
				let data_stat = {
					categories: [...indexArray],
					series: [{
							name: '成交量',
							type: 'column',
							data: [...dealNum],
							pointShape: 'none',
							legendShape: 'square'
						},
						{
							name: '成交价格',
							type: 'line',
							index: 1,
							color: '#ffe700',
							data: [...price],
							pointShape: 'none',
							legendShape: 'triangle'
						}
					]
				};
				this.chartData_stat = JSON.parse(JSON.stringify(data_stat));
			},
			async setUser() {
				// 保留前5个元素和最后一个元素
				this.user_line = [...this.user_line.slice(0, 5), this.user_line[this.user_line.length - 1]];
				const indexArray = this.user_line.map((i, index) => index);
				let data_user = {
					categories: [...indexArray],
					series: [{
						name: '',
						data: [...this.user_line],
						pointShape: 'none',
						legendShape: 'none',
					}, ],
				};
				this.chartData_user = JSON.parse(JSON.stringify(data_user));
			},
			// 市值折线图
			async setTimes() {
				const res = await getMonStat();
				res.data.forEach((item) => {
					this.times_line.push(item);
				});
				this.times_line = res.data.slice(-6); 
				this.times_num = this.times_line[this.times_line.length - 1]
				this.times_num = this.times_line[this.times_line.length - 1];
				const indexArray = this.times_line.map((i, index) => index);
				let data_times = {
					categories: [...indexArray],
					series: [{
						name: '',
						data: [...this.times_line],
						pointShape: 'none',
						legendShape: 'none',
					}]
				};
				this.chartData_times = JSON.parse(JSON.stringify(data_times));
			}
		}
	};
</script>
<style scoped lang="less">
	.conter {
		padding: 10rpx 22rpx;

		.statistical_box {
			width: 710rpx;
			padding: 27rpx;
			margin-bottom: 20rpx;
			background: #15132a;
			border-radius: 14rpx;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.302);

			.number {
				color: #fff;
				font-size: 35rpx;
				font-weight: 800;
				font-family: "font";
				margin-bottom: 27rpx;
			}

			.image_box {
				width: 80rpx;
				height: 80rpx;
			}

			.market_value {
				display: flex;
				margin-left: 20rpx;
				align-items: center;

				.value_box {
					color: #fff;
					font-weight: 500;
					font-size: 24rpx;
					font-family: "font";
					margin-left: 34.88rpx;
				}
			}

			.charts_box {
				width: 680rpx;
				height: 280rpx;
				margin-top: 20rpx;
			}
		}

	}
</style>